<template>
    <div class="pt-5">
        <el-table :data="tableData" v-loading="loading" @row-click="row" @row-contextmenu="contextmenu"
            @contextmenu.prevent="rightClick" v-el-table-infinite-scroll="load" style="width: 100%" height="85.4vh">
            <el-table-column width="240px">
                <template #header>
                    <el-dropdown trigger="click">
                        <div class="el-dropdown-link flex aic w60p">
                            <span class="w40p">{{ $t('main.date') }}:</span>
                            <el-date-picker v-model="dateValue" @change="inputEvent" format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD" type="daterange" unlink-panels range-separator="To"
                                start-placeholder="Start date" end-placeholder="End date" :size="size" />
                        </div>
                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.order.create_time }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="120px">
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie">
                        <span class="el-dropdown-link">
                            Country<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-input @input="inputEvent" v-model="country" placeholder="Country"
                                :prefix-icon="Search"></el-input>
                        </template>
                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.country && title.row.country.name }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="290px">
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie">
                        <div class="el-dropdown-link flex aic w100p">
                            <span>Payment_type:</span>
                            <el-select v-model="PaymentType" class="w60p ml-5" @change="PaymentTypes" remote
                                @visible-change="visible" multiple collapse-tags collapse-tags-tooltip filterable
                                placeholder="Payment_type">
                                <el-option v-for="item in PaymentTypeArr" :key="item.value" :label="item.value"
                                    :value="item.value" />
                            </el-select>
                        </div>
                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.pay && title.row.pay.payment_type }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column width="260px">
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie">
                        <div class="el-dropdown-link flex aic w100p">
                            <span>Current:</span>
                            <el-select v-model="current" class="w70p ml-5" @change="Currents" remote
                                @visible-change="visible" multiple collapse-tags collapse-tags-tooltip filterable
                                placeholder="Current">
                                <el-option v-for="item in currentArr" :key="item.value" :label="item.value"
                                    :value="item.value" />
                            </el-select>

                        </div>
                    </el-dropdown>
                </template>

                <template v-slot="client">
                    <span>{{ client.row.pay && client.row.pay.Current }}</span>
                </template>
            </el-table-column>
            <el-table-column width="100">
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie">
                        <span class="el-dropdown-link ">
                            Amount
                        </span>
                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.Amount }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="210px">
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie">
                        <div class="el-dropdown-link flex aic">
                            <span>Sale:</span>
                            <el-select v-model="sale" class="w70p ml-5" @change="sales" :remote-method="inpSale" remote
                                @visible-change="visible" multiple collapse-tags collapse-tags-tooltip filterable
                                placeholder="Select">
                                <el-option v-for="item in saleArr" :key="item.value" :label="item.value" :value="item.id" />
                            </el-select>
                        </div>
                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.user && title.row.user.name }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="120px">
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie">
                        <span class="el-dropdown-link">
                            Comment<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-input @input="inputEvent" v-model="comment" placeholder="Comment"
                                :prefix-icon="Search"></el-input>
                        </template>
                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.pay && title.row.pay.comments }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="150px">
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie">
                        <span class="el-dropdown-link">
                            Payment way
                        </span>
                        <!-- <template #dropdown>
                            <el-input @input="inputEvent" v-model="payment" placeholder="Payment way"
                                :prefix-icon="Search"></el-input>
                        </template> -->
                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.pay && title.row.pay.Payment_way }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="240px">
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie">
                        <div class="el-dropdown-link flex aic">
                            <span>{{ $t('main.operator') }}:</span>
                            <el-select v-model="inputer" class="w60p ml-5" @change="inputers" :remote-method="inpOperator"
                                remote @visible-change="visible" multiple collapse-tags collapse-tags-tooltip filterable
                                placeholder="Select">
                                <el-option v-for="item in operatorArr" :key="item.value" :label="item.value"
                                    :value="item.id" />
                            </el-select>
                        </div>

                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.received && title.row.received.name }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column>
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie">
                        <span class="el-dropdown-link">
                            rate
                        </span>
                        <!-- <template #dropdown>
                            <el-input @input="rate" v-model="plName" placeholder="rate"
                                :prefix-icon="Search"></el-input>
                        </template> -->
                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.pay && title.row.pay.received_rate }}</span>
                    </div>
                </template>
            </el-table-column>


        </el-table>
        <!-- <fileDetails v-else @userList="userList" :detalisList="detalisList"></fileDetails> -->
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as $axios from '../../../api/index'
import fileDetails from './fileDetails.vue';
import { Search } from '@element-plus/icons-vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { useDemoStore } from '../../../pinia/index'
const store = useDemoStore()

const props = defineProps({
    user_id: Array
})

// 加载
const loading = ref(false)

const show = ref(true)
// 点击某一行的时候触发
// const detalisList = ref([])
const row = (value) => {
    const data = {
        path: '',
        token: store.token,
        user_id: props.user_id,
        Payment_id: value.Payment_id,
    }
    $axios.$fileGet(data).then(res => {
        res.data.forEach(item => {
            item.size = item.size ? (item.size / 1024 / 1000).toFixed(2) + 'M' : '暂无数据'
        })
        // detalisList.value = res.data
        emits('detalisData', res.data)
        show.value = false
        emits('getTotal', res.data.length)
        console.log(res.data)
    })
    emits('getPay', value.Payment_id, value.user.id)
    // console.log(value)
}

// 子组件触发的事件
// const userList = (value) => {
//     detalisList.value = value
//     console.log(value)
// }

// 日期
const dateValue = ref([])

// Country
const country = ref('')

// Payment_type
const PaymentType = ref([])

// Current
const current = ref([])

// Sale
const sale = ref([])

// Comment
const comment = ref('')

// Payment
const payment = ref('')

// 操作人
const inputer = ref('')

// rate
const rate = ref('')


// 下拉框出现/隐藏时触发
const visible = () => {
    // inpcustomer()
    // inpClient()
    inpSale()
    inpOperator()
}

// PaymentTypeArr搜索框
const PaymentTypeArr = ref([
    { value: "received", },
    { value: "payout_request" },
    { value: "payout,fund_request" },

])

// PaymentTypes多选框
const PaymentTypes = (value) => {
    inputEvent()
}

// Current搜索框
const currentArr = ref([
    { value: "USD" },
    { value: "EUR" },
    { value: "RMB" },
    { value: "GBP" },
    { value: "CAD" },
    { value: "AUD" },
    { value: "HKD" }

])

// Currents多选框
const Currents = (value) => {
    inputEvent()
}

// Sale搜索框
const saleArr = ref([])
// const clientName = ref('')
const inpSale = (text) => {
    const data = {
        token: store.token,
        user_id: props.user_id,
        keywords: text || ''
    }
    $axios.$userUser_list(data).then(res => {
        // console.log(res.data)
        saleArr.value = res.data.map(item => {
            return {
                value: item.name,
                id: item.id
            }
        })
    })
}

// Sale多选框
const sales = (value) => {
    inputEvent()
}

// 操作人搜索框
const operatorArr = ref([])
// const clientName = ref('')
const inpOperator = (text) => {
    const data = {
        token: store.token,
        keywords: text || ''
    }
    $axios.$userUser_list(data).then(res => {
        // console.log(res.data)
        operatorArr.value = res.data.map(item => {
            return {
                value: item.name,
                id: item.id
            }
        })
    })
}

// 操作人多选框
const inputers = (value) => {
    inputEvent()
}


// 输入事件,获取文件信息
// 获取询盘文件数据
var timer
const tableData = ref([])
var data
const inputEvent = (value) => {
    loading.value = true
    clearTimeout(timer);
    timer = setTimeout(() => {
        data = {
            token: store.token,
            limit: 25,
            page: 1,
            country: country.value,
            comments: comment.value,
            current: current.value,
            type: PaymentType.value,
            accountant: inputer.value,
            user_id: store.type != 4 ? sale.value.length == 0 ? props.user_id : sale.value : [],
            customer_id: store.type == 4 ? sale.value.length == 0 ? props.user_id : sale.value : [],
            start_time: dateValue.value && dateValue.value[0],
            end_time: dateValue.value && dateValue.value[1],
        }
        $axios.$payNew_list(data).then(res => {
            loading.value = false
            tableData.value = res.data.data
            emits('getTotal', res.data.total)
            console.log(res.data)
        })
    }, 400)
}

// 上拉触底事件
const load = () => {
    loading.value = true
    if (data) {
        data.page++
        $axios.$payNew_list(data).then(res => {
            loading.value = false
            tableData.value = [
                ...tableData.value,
                ...res.data.data
            ]
        })
    } else {
        inputEvent()
    }
}

// 数据长度
const emits = defineEmits(['getTotal', 'detalisData', 'getPay'])

// 下拉框出现隐藏
// const visibie = ()=>{
//     tetx.value = ''
// }

</script>

<style lang="less" scoped></style>